<template>
  <el-dialog
    title="提醒设置"
    :visible.sync="remindFormShow"
    :show-close="false"  :close-on-click-modal="false" :close-on-press-escape="false"
    width="20%"
    center>
    <el-form :model="remindForm" ref="remindForm" label-width="100px" size="small"
             style="width: 73%;">
      <el-form-item label="选择提醒日期" prop="expression">
        <el-date-picker ref="datePicker"
          v-model="remindForm.expression"
          type="datetime"
          :editable="false"
          :default-value.sync="timeNow"
          :default-time.sync="timeNow"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="dateTime" @focus="timeUpdate"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="提前提醒天数" prop="preDays">
        <el-input type="text" @keyup.native="number" v-model="remindForm.preDays" autocomplete="off">
        </el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="close(0)">取 消</el-button>
    <el-button type="primary" @click="close(1)">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
import moment from "moment";
export default {
  props: {
    remindFormShow: Boolean
  },
  name: "RemindForm",
  data() {
    return {
      remindForm: {
        expression: null,
        preDays: 0
      },
      timeNow:this.localTime(),
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        }
      },
    }
  },
  methods: {
    clear(){
      this.remindForm.expression='';
      this.remindForm.preDays=0;
    },
    close(save) {
      this.$emit('done',save?Object.assign({},this.remindForm):0);
      this.clear();
    },
    checkTime(){
      let notOk=moment(this.remindForm.expression).subtract(this.remindForm.preDays,'days').isBefore(moment());
      if(notOk){
        let realDiff=moment.duration(moment(this.remindForm.expression).diff(moment()));
        return Math.abs(realDiff.asDays()).toFixed(0);
      }
      return this.remindForm.preDays;
    },
    dateTime(){
      this.remindForm.preDays=this.checkTime();
    },
    number(){
      this.remindForm.preDays=this.remindForm.preDays.replace(/[^\.\d]/g,'');
      this.remindForm.preDays=this.remindForm.preDays.replace('.','');
      this.remindForm.preDays=this.checkTime();
    },
    localTime(){
      return moment().add(1,'days').add(5,'minutes').format('yyyy-MM-DD HH:mm:ss');
    },
    timeUpdate(){
      this.timeNow=this.localTime();
    }
  },
  // watch:{
  //   remindFormShow:{
  //     handler(n,o){
  //       if(n){
  //         this.timeNow=this.localTime();
  //       }
  //     }
  //   }
  // }
}
</script>

<style scoped>
</style>
